﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
    <title>测试</title>
    <script src="js/react.js"></script>
    <script src="js/JSXTransformer.js"></script>
</head>
<body>
    <h1 id="example">测试</h1>
    <script type="text/jsx">
        var names = ['Alice', 'Emily', 'Kate'];
        var arr = [
        <h1>Hello</h1>
        ];
        var TestClass = React.createClass({
            render:function(){
                return  <div>creatClass {this.props.name}</div>
                }
        });

        var HelloClass2 = React.createClass({
            render:function(){
                return (
                    <ol>
                        {
                        this.props.children.map(function (child) {
                        return <li>{child}</li>
                        })
                        }
                    </ol>
                )
            }
        });
        React.render(
        <div>
            {
            names.map(function(name){
            return <h1>{name}</h1>;
            })
            }
            {arr}
            <TestClass name="michael" />
            <HelloClass2>
                <span>michael</span>
                <span>go1</span>
            </HelloClass2>
        </div>,
        document.getElementById('example')
        );
    </script>
</body>
</html>
